import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {IChannel} from './../../models/home';
import Icon from '@/assets/iconfont/index';
import TouchAble from '@/components/Touchable';

interface IProps {
  data: IChannel;
  onPress: (data: IChannel) => void;
}

const ChannelItem: React.FC<IProps> = props => {
  const {image, remark, title, played, playing} = props.data;

  const onPress = () => {
    const {data, onPress: press} = props;
    if (typeof onPress === 'function') {
      press(data);
    }
  };

  return (
    <TouchAble style={styles.container} onPress={onPress}>
      <Image source={{uri: image}} style={styles.image} />
      <View style={styles.rightContainer}>
        <Text style={styles.title} numberOfLines={1}>
          {title}
        </Text>
        <Text style={styles.remark} numberOfLines={2}>
          {remark}
        </Text>
        <View style={styles.bottom}>
          <View style={styles.playedView}>
            <Icon name="icon-V" size={14} />
            <Text style={styles.number}>{played}</Text>
          </View>
          <View style={styles.playingView}>
            <Icon name="icon-shengyin" size={14} />
            <Text style={styles.number}>{playing}</Text>
          </View>
        </View>
      </View>
    </TouchAble>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    margin: 10,
    padding: 10,
    backgroundColor: '#FFF',
    borderRadius: 8,
    shadowColor: '#ccc',
    shadowOffset: {
      width: 0,
      height: 5,
    },
    shadowOpacity: 0.5,
    shadowRadius: 10,
    // elevation: 5, //安卓不支持阴影  只支持此投影  设置范围有限
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: 8,
    backgroundColor: '#dedede',
    marginRight: 10,
  },
  rightContainer: {
    flex: 1,
    justifyContent: 'space-around',
  },
  title: {
    fontSize: 16,
    marginBottom: 10,
  },
  remark: {
    backgroundColor: '#f8f8f8',
    padding: 5,
    marginBottom: 5,
    borderRadius: 20,
  },
  bottom: {
    flexDirection: 'row',
  },
  playedView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 20,
  },
  playingView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  number: {
    marginLeft: 5,
  },
});

export default ChannelItem;
